<template>
  <div class="login-page">
    <div class="user-info">
      <div class="login-title m-t-81 m-b-58">用户登录</div>
      <el-form :model="userInfo" :rules="rules" ref="loginFormRef" class="flex-column">
        <el-form-item prop="userName">
          <div class="input-box">
            <el-input class="user-input fz-18" v-model="userInfo.userName" placeholder="请输入用户名">
              <template #prefix>
                <img src="@/assets/login/user-name.png" alt="" class="user-icon" />
              </template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="input-box m-t-30">
            <el-input class="user-input" :type="inputtype" v-model="userInfo.password" placeholder="请输入密码">
              <template #prefix>
                <img src="@/assets/login/user-password.png" alt="" class="user-icon" />
              </template>
              <template #suffix>
                <div class="suffix-icon">
                  <el-icon v-show="!isLook" @click="handleLook"><View /></el-icon>
                  <el-icon v-show="isLook" @click="handleLook"><Hide /></el-icon>
                </div>
              </template>
            </el-input>
          </div>
        </el-form-item>
      </el-form>
      <div class="flex-between">
        <div>
          <el-checkbox v-model="isrememberPassword" label="记住密码" />
        </div>
        <span class="forgot-title fz-18">忘记密码？</span>
      </div>
      <el-button @click="handleLogin" class="width100 login- m-t-47" type="primary">登录</el-button>
    </div>
  </div>
</template>

<script setup>
import { View, Hide } from '@element-plus/icons-vue';
// import { ref } from 'vue';

const router = useRouter();
const userInfo = ref({});

const isLook = ref(false);
const inputtype = ref('password');

const rules = ref({
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
});
const isrememberPassword = ref(false);
function handleLogin() {
  router.push({ path: '/manageSys/index' });
}
function handleLook() {
  isLook.value = !isLook.value;
  inputtype.value = isLook.value ? 'text' : 'password';
}
</script>
